﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/beetlex4axios.js"></script>
    <script src="js/component.js"></script>
    <title>Beetlex samples</title>

</head>
<body>
    <div id="page">
        <page-header>

        </page-header>
        <div class="container" style="margin-top:60px;">
            <div class="row">
                <form class="form-inline">
                    <div class="form-group">
                        <label class="sr-only" for="exampleInputEmail3">用户名</label>
                        <input type="text" class="form-control" v-model="login.data.name" placeholder="Name">
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="exampleInputPassword3">密码</label>
                        <input type="password" class="form-control" v-model="login.data.pwd" placeholder="Password">
                    </div>

                    <button type="button" @click="login.post()" class="btn btn-default">登陆</button>
                    <button type="button" class="btn btn-default" @click="list.get()">查询</button>
                </form>
            </div>
            <div class="row">
               
                <table class="table">

                    <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Title</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,i) in list.result">
                            <th scope="row">{{i}}</th>
                            <td>{{item.FirstName}}</td>
                            <td>{{item.LastName}}</td>
                            <td>@{{item.Title}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script>
        var login = new beetlexAction("/login", { name: '', pwd: '' })
        login.requested = function (r) {
            if (r == false)
                alert('用户名或密码不正确!');
            else
                alert('登陆成功！');
        };
        var list = new beetlexAction("/list", null, []);
        var model = {
            login: login,
            list: list,

        };
        beetlex.errorHandlers[401] = function (r) {
            alert('无权限操作');
        };
        var page = new Vue({
            el: '#page',
            data: model,
            methods: {

            }
        });

    </script>
</body>

</html>